<template>
    <div>
        <loading :state="loading"/>
        <div class="head">
            <div class="head-btn">
                <div class="btn" :class="{active1: showFirst, btn1: !showFirst}" @click="switchPage">
                    <h1>开通免费{{openType|showType}}</h1>
                </div>
                <div class="btn" :class="{active2: !showFirst, btn2:showFirst}" @click="switchPage">
                    <h1>查看已开通</h1>
                </div>
            </div>
            <div class="bot-l">
                <div class="left">
                    <p>已开通</p>
                    <h1>{{openNum.hasOpen}}</h1>
                </div>
                <div class="right">
                    <p>未开通</p>
                    <h1>{{openNum.needOpen}}</h1>
                </div>
            </div>
        </div>
        <div class="openVip" v-if="showFirst">
            <ul class="info" v-if="JSON.stringify(result) !=='{}'">
                <li>
                    <img :src=result.img alt=""/>
                    <div class="list">
                        <div class="list-first">
                            <h1>{{result.name}} </h1>
                            <h2>ID{{result.id}}</h2>
                        </div>
                        <div class="list-second">
                            <p v-if="result.tips">{{result.tips}}</p>
                            <div class="btn" :class="{active:isActive}" @click="openVip">{{ result|showStatus }}</div>
                        </div>
                        <ul class="list-detail" v-if="result.between && result.between.length>0">
                            <li v-for="(item, index) in result.between" :key="index">
                                <p>{{ item.name}}</p>
                                <p>（{{ item.rank}}） ID{{ item.uid}}</p>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
            <div class="bottom">
                <!--<img :src="bkline">-->
                <div class="search">
                    <van-search placeholder="请输入需要开通成员的ID" v-model="value" style="background: #fff" @search="onSearch"/>
                </div>
            </div>
        </div>
        <div class="nameList" v-else>
            <ul class="info">
                <li v-for="(item, index) in nameList" :key="index">
                    <img :src=item.accept_user_img alt=""/>
                    <div class="list">
                        <div class="list-first">
                            <h1>{{item.accept_user_name}}</h1>
                            <h2>ID{{item.accept_uid}}</h2>
                        </div>
                        <div class="list-third">
                            <p>开通时间：{{created[index]}}</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <popup :pupData="pupData" @sureFun="sureFun" @cancelFun="cancelFun" ref="popupref"/>
        <popup :pupData="pupPay" @sureFun="surePay" @cancelFun="cancelPay" ref="popupPay"/>
    </div>
</template>

<script type="text/ecmascript-6">
    import Moment from 'moment';
    export default {
        data() {
            return {
                openType: this.$route.query.para,
                loading: true,
                value: '', // 搜索的内容
                showFirst: true, // 页面切换
                listImg: `${this.$Public.ossImg}mingdan.svg`,
                openImg: `${this.$Public.ossImg}yaoshi.svg`,
                bkline: `${this.$Public.pageImg}sx_bkline.png`,
                result: {}, // 需开通vip
                nameList: [], // 名单列表
                openNum: {
                    hasOpen: '',
                    needOpen: ''
                },
                pupPay: {
                    des: '确认支付?',
                    cancel: '取消',
                    sure: '确定'
                },
                pupData: {
                    des: '确认开通?',
                    cancel: '取消',
                    sure: '确定'
                },
                openStatus: '',
                created: []
            };
        },
        created() {
            let data = {
                type: this.openType,
                getHasOpen: 'ok'
            };
            this.$Spread.getVipNum(data).then(res => {
                console.log(res);
                this.loading = false;
                this.openNum.hasOpen = res.data.hasOpenNum;
                this.openNum.needOpen = res.data.vip_num;
            }, () => {
                this.loading = false;
            });
        },
        computed: {
            valueNumber() {
                return this.value.replace(/[^0-9]/ig, '');
            },
            isActive() {
                return !this.result.tips;
            }
        },
        filters: {
            isOpen(val) {
                if (val) {
                    return '收起';
                } else {
                    return '详情';
                }
            },
            showStatus(val) {
                if (val.money === 0) {
                    return '开通vip';
                } else if (val.tips) {
                    return '不可开通';
                } else {
                    return '￥' + val.money;
                }
            },
            showType(val) {
                if (val === 'vip') {
                    return 'vip';
                } else {
                    return '总代';
                }
            }
        },
        methods: {
            sureFun() {
                this.$refs.popupref.switchState();
                // 开通方法
                let data = {
                    downUid: this.valueNumber,
                    type: this.openType
                };
                this.loading = true;
                this.$Spread.OpenAgent(data).then(res => {
                    this.loading = false;
                    this.$toast({
                        message: '授权身份成功',
                        duration: 1500
                    });
                }, () => {
                    this.loading = false;
                });
            },
            cancelFun() {
                // 取消开通方法
                this.$refs.popupref.switchState();
            },
            surePay: function () {
                this.$refs.popupPay.switchState();
                // 确定付费方法
                let data = {
                    downUid: this.valueNumber,
                    type: this.openType
                };
                this.loading = true;
                this.$Spread.OpenAgent(data).then(res => {
                    this.loading = false;
                    let data = {
                        type: res.type,
                        id: res.logId
                    };
                    this.$router.push({
                        name: 'pay-option',
                        query: data
                    });
                }, () => {
                    this.loading = false;
                });
            },
            cancelPay() {
                // 取消付费方法
                this.$refs.popupPay.switchState();
            },
            onSearch() {
                let data = {
                    type: this.openType,
                    downUid: this.valueNumber
                };
                this.loading = true;
                this.$Spread.getOpenVipList(data).then(res => {
                    this.loading = false;
                    this.result = res;
                    if (res.money === 0) {
                        this.openStatus = 'yes';
                    } else if (res.tips) {
                        this.openStatus = 'no';
                    } else {
                        this.openStatus = 'pay';
                    }
                }, () => {
                    this.loading = false;
                });
            },
            openVip() {
                // status:pay需付费开通，yes表示可直接开通
                if (this.openStatus === 'pay') {
                    this.$refs.popupPay.switchState();
                } else if (this.openStatus === 'yes') {
                    this.$refs.popupref.switchState();
                } else {
                    return false;
                }
            },
            switchPage() {
                this.showFirst = !this.showFirst;
                let data = {
                    type: this.openType
                };
                if (!this.showFirst) {
                    this.$Spread.getNameList(data).then(res => {
                        this.nameList = res.list;
                        res.list.forEach((item) => {
                            let time = Moment(item.created * 1000).format('YYYY-MM-DD HH:mm');
                            this.created.push(time);
                        });
                    });
                }
            }
        }
    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "../../assets/stylus/main.styl";
    .search .van-search {
        border-radius(20px)
        position: absolute;
        width: 94vw;
        top: -6vw;
        left: 3vw;
    }

    .head {
        padding-top: 5vw;
        .head-btn {
            flex-center();
        }
        & p {
            font-size word10;
            color: third-ash
        }
        & span {
            color: main-color
        }
        & .btn {
            height: 10vw
            overflow hidden
            background bk-color
            border(main-color)
            padding 0 9vw
            box-sizing border-box
            flex-x();
            &.btn1 {
                border-top-left-radius: 20px;
                border-bottom-left-radius: 20px;
            }
            &.btn2 {
                border-top-right-radius: 20px;
                border-bottom-right-radius: 20px;
            }
            & img {
                width: 5vw;
                heigth: 5vw;
                &.rotate-img {
                    transform rotate(270deg);
                }
            }
            & h1 {
                color: main-color
            }
        }
        .active1 {
            background gradient-color
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            & h1 {
                color: white
            }
        }
        .active2 {
            background gradient-color
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            & h1 {
                color: white
            }
        }
        .bot-l {
            flex-center();
            margin-top 10px
            & p {
                font-size 3.7vw;
            }
            & h1 {
                word-vw(18, black)
                margin-top: 5px;
            }
            .left {
                margin-right 10px;
                text-align right
            }
            .right {
                margin-left 10px
                text-align left
            }
        }
    }

    .openVip {
        margin-top: 7vw;
    }

    .nameList {
        margin-top 7vw
    }

    .info {
        & > li {
            width: 94%;
            background white
            flex-x(flex-start, flex-start);
            margin-bottom 10px;
            border-radius(10px)
            margin-left 3%
            & img {
                width: 15vw;
                height: 15vw;
                border-radius(50%);
                flex: none
                margin: 2vw;
            }
            & .list {
                width: 100%;
                flex: 1;
                flex-y(center, flex-start);
                .list-first {
                    padding 0 2vw
                    box-sizing border-box
                    width: 100%;
                    height: vw(40);
                    flex-x();
                    bor-b();
                }
                .list-second {
                    padding 0 2vw
                    box-sizing border-box
                    width: 100%;
                    height: vw(45);
                    flex-x(space-between);
                    bor-b();
                    & p {
                        color: third-ash
                    }
                    & span {
                        display: block;
                        width: 0;
                        height: 0;
                        border-width: 1vw;
                        border-style: solid;
                        border-color: first-ash transparent transparent transparent
                        margin 2vw 4vw 0 1vw
                        &.rotate {
                            border-color: transparent transparent first-ash transparent
                            margin: -1vw 4vw 0 1vw;
                        }
                    }
                    & .btn {
                        font-size word14
                        width: 24vw
                        height: 7vw
                        border-radius(20px);
                        flex-x(center, center);
                        color: third-ash
                        border(third-ash);
                        &.active {
                            color: main-color
                            border(main-color);
                        }
                    }
                }
                .list-third {
                    padding 0 2vw
                    box-sizing border-box
                    width: 100%;
                    height: vw(45);
                    flex-x();
                    bor-b();
                    & p {
                        font-size word12;
                        color: third-ash
                    }
                }
                .list-detail {
                    width: 100%;
                    height: vw(90)
                    overflow hidden
                    transition(all, 0.3s);
                    &.fade-enter, &.fade-leave-to {
                        height: vw(0);
                    }
                    & li {
                        width: 100%;
                        height: vw(30);
                        padding 0 2vw
                        box-sizing border-box
                        flex-x();
                        bor-b();
                    }
                }
            }
        }
    }

    .bottom {
        width: 100%;
        height: vw(55);
        background gradient-color
        position fixed
        bottom: 0
        box-sizing border-box
        flex-x();
        .search {
            margin-bottom 10px;
            width: 100%;
        }
        img {
            width: 100%;
            position: absolute;
            top: 6vw
        }
    }

</style>
